<template>
  <!--
  <YIcon :size="18">已经在main.ts注册了该组件，直接使用</YIcon>
  <y-icon :size="14">已经在main.ts注册了该组件，直接使用</y-icon>

  <y-icon :size="18" color="red">
    <AddBoxOutlined />
  </y-icon>

  <button @click="toggleTheme">toggleTheme</button>
  -->

  <div class="yun-color-primary">
    <button
      class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3"
    >
      xxxxxxxxxx
    </button>
  </div>
</template>

<script setup lang="ts">
// import Icon from "@yun/components/icon/src/icon.vue";
// import Icon from "@yun/components/icon";
// console.log(Icon);

const theme = ["blue", "violet", ""];
let i = 0;
const toggleTheme = () => {
  if (i >= theme.length) {
    i = 0;
  }
  document.documentElement.className = "y-theme-" + theme[i];
  i++;
};
</script>

<style scoped>
.yun-color-primary {
  background-color: var(--yun-color-danger);
  color: var(--tw-ring-color);
}
</style>
